<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div{width: 1150px; height: 517px; margin: 200px auto;background-color: hsl(0, 100%, 78%);}
        a{height: 517px; width: 220px; display:block; float:left; margin-right: 10px;}
        div a:hover{transform: translateY(-20px); transition-duration: 1s;}
    </style>
</head>
<body>
   <div>
        <a href="" ><img src="01.jpg" width="220 px" height="517 px" alt="四季"></a>
        <a href="" ><img src="02.jpg" width="220 px" height="517 px" alt="COS周"></a>
        <a href="" ><img src="03.jpg" width="220 px" height="517 px" alt="百物语"></a>
        <a href="" ><img src="04.gif" width="220 px" height="517 px" alt="平安物语"></a>
        <a href="" ><img src="05.png" width="220 px" height="517 px" alt="漫画"></a>
   </div>
</body>
</html>